<template>
	<view class="sub-tree-select">
		<!-- 上门洗车 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">上门洗车</text>
			</view>
		</u-navbar>
		<!-- 分类 -->
		<view class="= w-750 b-box   po-re d-flex flex-r ali-i-c just-sw " style="position: relative;">
			<!-- left -->
			<view class="bg-ff" style="width:188rpx">
				<view
					style="width: 188rpx;height: 92rpx;position: absolute;"
					class=" d-flex flex-r ali-i-c just-c bg-ff"
					v-for="(item, index) in categoryList"
					:key="item.id"
					@click="activeTrees(index)"
					:class="{ selected: select === index }"
					:style="{'top':index*120+ 'rpx'}"
				>
					<text class="pf-sc fw-400 a" style="font-size: 30rpx;color: #333333;">
						{{ item.name }}
					</text>
				</view>
			</view>

			<!-- 点击侧边栏显示对应的数据 -->
			<!-- right -->
			<view
				v-for="(item, index) in categoryList"
				:key="item.id"
				class="b-box d-flex flex-r ali-i-s just-sw flex-wp"
				v-if="select === index"
				style="width:562rpx;padding: 16rpx 16rpx 0"
			>
				<view
					v-for="(itm, idx) in item.category"
					style="width: 260rpx;border-radius: 8rpx 8rpx 8rpx 8rpx;margin-bottom: 57rpx;"
					@click="GoSubMit(itm.image, itm.name, itm.payprice,itm.id)"
					class="bg-ff d-flex flex-c ali-i-c just-c"
				>
					<image :src="itm.image" style="width:60rpx;height:60rpx"></image>
					<text class="fw-500 pf-sc " style="font-size:28rpx;color: #262626;">{{ itm.name }}</text>
					<view class="d-flex flex-r ali-i-c just-s">
						<text class="pf-sc fw-500 " style="font-size: 20rpx;color: #FF5C00;">¥</text>
						<text class="pf-sc fw-500 " style="font-size: 32rpx;color: #FF5C00;">
							{{ itm.price }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
//引入封装的请求3
import { categorylist } from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
export default {
	components: {},
	data() {
		return {
			containerHeight: '',
			select: 0,
			categoryList: []
		};
	},
	methods: {
		GoSubMit(image, name, price, id) {
			uni.navigateTo({
				url: `/userModelA/userA/SubMitOrder/SubMitOrder?image=${image}&name=${name}&price=${price.toFixed(2)}&id=${id}`
			});
		},
		activeTrees(index) {
			//点击分类->获取分类下商品列表
			this.select = index;
		}
	},
	onLoad(source) {
		this.containerHeight = _containerHeight();
		//渲染数据
		categorylist({token:uni.getStorageSync('usertoken')}).then(res => {
			console.log(res.data.data);
			this.categoryList = res.data.data;
		});
	}
};
</script>

<style lang="scss">
.sub-tree-select {
	.selected {
		background: rgba(31, 98, 187, 0.1) !important;

		.a {
			color: #1f62bb !important;
			font-weight: 500 !important;
		}
	}
}
</style>
